<!--
 * @FileDescription 过滤器设置
 * @Author 杨宇翔
 * @Date 20220531 14:20:53
 * @LastEditors 杨宇翔
 * @LastEditTime 20220531 14:20:53
-->
<template>
    <div class="filter-configuration">
        <div class="container">
            <div class="header">
                <span>过滤器设置</span>
                <span class="material-icons" @click="UsageComponent.Default.NavigateToPreviousAsync()">×</span>
            </div>
            <div class="content">
                <table>
                    <thead>
                        <th>过滤器设置项目</th>
                        <th>设置</th>
                        <th>是否使能</th>
                        <th>最小值</th>
                        <th>最大值</th>
                    </thead>
                    <tbody>
                        <tr v-for="configuration of FilterComponent.Default.AllConfiguration" :key="configuration.Id">
                            <td>{{ configuration.Name }}</td>
                            <td>
                                <button class="reset" type="button"
                                    @click="FilterComponent.Default.SetFilterAsync(configuration.Id)">
                                    <span>发送</span>
                                </button>
                            </td>
                            <td>
                                <input class="reset" type="checkbox" name="过滤器设置项目" :id="configuration.Name" hidden
                                    v-model="configuration.Active">
                                <label :for="configuration.Name">
                                    <img
                                        :src="configuration.Active ? `/static/MMWR/switch_on.png` : '/static/MMWR/switch_off.png'">
                                </label>
                            </td>
                            <td>
                                <input v-if="configuration.Range.length != 0" class="colorblack" type="number"
                                    :min="configuration.Range[0]" :max="configuration.Range[1]"
                                    :step="configuration.Step" v-model="configuration.Min">

                                <!-- <select v-if="configuration.Range.length == 0" name="过滤器设置项目" :id="configuration.Name"
                                    v-model="configuration.Min">
                                    <option v-for="option of configuration.Options" :value="option">{{ option }}
                                    </option>
                                </select> -->
                                <UseDropdown class="dropdown" v-if="configuration.Range.length == 0"
                                    :Options="configuration.Options" v-model="configuration.Min" />
                            </td>
                            <td>
                                <input v-if="configuration.Range.length != 0" class="colorblack" type="number"
                                    :min="configuration.Range[0]" :max="configuration.Range[1]"
                                    :step="configuration.Step" v-model="configuration.Max">

                                <!-- <select v-if="configuration.Range.length == 0" name="过滤器设置项目" :id="configuration.Name"
                                    v-model="configuration.Max">
                                    <option v-for="option of configuration.Options" :value="option">
                                        {{ option }}
                                    </option>
                                </select> -->
                                <UseDropdown class="dropdown" v-if="configuration.Range.length == 0"
                                    :Options="configuration.Options" v-model="configuration.Max" />
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { FilterComponent, UsageComponent } from './MMWRComponent';
import UseDropdown from './UseDropdown.vue';

</script>

<style scoped>
.filter-configuration {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    backdrop-filter: blur(1rem);
}

.container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    width: 110rem;
    height: 92rem;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    border-radius: 2rem;
    border: solid 0.6rem transparent;
    background-image: linear-gradient(#131620, #131620),
        linear-gradient(90deg, #218cde, #807de1);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

.header {
    width: 100%;

    padding: 2rem 2rem 0 2rem;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header>span:first-of-type {
    color: white;
    font-size: 2.4rem;
    font-weight: 500;
}

.header>.material-icons {
    color: #81859C;
    font-size: 3.6rem;
}

.content {
    padding-top: 2rem;
}

table {
    width: 100%;

    border-collapse: separate;
    border-spacing: 4rem 1rem;
}

thead {
    position: relative;
}

thead::after {
    content: '';

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 0.1rem;

    background-color: #81859C1A;
}

th,
td {
    height: 4rem;
    font-size: 1.6rem;
}

th {
    color: #81859C;

    text-align: center;
}

td {
    position: relative;

    color: #B1B1D4;
}

th:nth-of-type(1) {
    width: 20rem;

    text-align: left;
}

th:nth-of-type(2) {
    width: 8rem;
}

th:nth-of-type(3) {
    width: 10rem;
}

th:nth-of-type(4) {
    width: 24rem;
}

th:nth-of-type(5) {
    width: 24rem;
}

td>input {
    border: none;
    outline: none;

    color: #81859C;
    font-size: 1.6rem;

    width: 24rem;
    height: 3.6rem;
    padding-left: 1.5rem;

    border-radius: 0.6rem;
    border: 0.1rem solid #36384B;

    background-color: transparent;
}

td>input:focus {
    border: solid 0.1rem;
    border-image: linear-gradient(90deg, rgba(128, 125, 225, 1), rgba(33, 140, 222, 1)) 1 1;
}

td>input::-webkit-inner-spin-button,
td>input::-webkit-outer-spin-button {
    display: none;
}

.dropdown {
    position: relative;
}

td:nth-of-type(2) {
    display: flex;
    justify-content: center;
    align-items: center;
}

td>label {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

button {
    cursor: pointer;
}

button>span {
    color: #81859C;
    font-size: 1.6rem;
}
</style>